<!-- 关于我们页面 -->
<template>
  <div class="aboutUs">
    <div class="content">
      <img src="./img/abouttext.png" alt="" class="bigText" />
      <img src="./img/shubiao.png" alt="" class="shubiao" />
      <p class="text1">COMPANY</p>
      <p class="text2">INTRODUCTION</p>
      <p class="text3">西安数字卡本信息科技有限公司</p>
      <p class="text4">
        西安数字卡本是一家致力于数字孪生可视化管理平台的国家级高新技术企业,专注数字孪生平台的研发、数字场景的塑造，同时基于大数据分析、人工智能、物联网等核心技术帮助客户进行数字化的建立与升级。
      </p>
      <div class="lx">
        <p class="emall">
          EMAIL <br />

          <a href="mailto:vivi@digital-carbon.com"
            ><span>商务合作：vivi@digital-carbon.com</span></a
          >
          <a href="mailto:join@digital-carbon.com"
            ><span>加入我们：join@digital-carbon.com</span></a
          >
        </p>
        <p class="phone">
          PHONE <br />
          <a href="tel:+029-81887108"><span>+029-81887108</span></a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="less" scoped>
.bigText {
  position: absolute;
  right: 0.5rem;
  top: 1.1rem;
  width: 7%;
}
.shubiao {
  position: absolute;
  right: 20%;
  top: 80%;
  animation: jump 2s ease infinite;
}
@keyframes jump {
  0% {
    transform: translateY(0) scale(1);
  }
  /* 中间状态图片位移并且拉伸 */
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.aboutUs {
  width: 100%;
  height: 100vh;
  background: url('../img/BJ.jpg') no-repeat center;
  background-size: cover;
  position: relative;
  overflow-y: hidden;
  overflow-x: hidden;
}
.content {
  position: relative;
  width: 85%;
  height: 100vh;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  .text1 {
    padding-top: 11%;
    color: #26e5a0;
    font-size: 0.68rem;
    font-weight: bold;
    font-family: PingFang SC;
  }
  .text2 {
    color: #fff;
    font-weight: bold;
    font-size: 0.68rem;
    font-family: PingFang SC;
  }
  .text3 {
    color: #fff;
    font-weight: bold;
    font-size: 0.24rem;
    font-family: PingFang SC;
    padding-top: 2%;
  }
  .text4 {
    padding-top: 2%;
    width: 35%;
    color: rgb(224, 224, 224);
    font-size: 0.18rem;
    line-height: 0.3rem;
    font-family: PingFang SC;
    letter-spacing: 2px;
  }
  .allBtn {
    width: 1.2rem;
    padding-top: 0.38rem;
    cursor: pointer;
  }
  .lx {
    width: 36%;
    padding-left: 19%;
    padding-top: 4%;
    .emall {
      color: #fff;
      font-size: 0.18rem;
      span {
        padding-top: 0.1rem;
        display: block;
        color: #26e5a0;
        font-size: 0.16rem;
      }
    }
    .phone {
      color: #fff;
      font-size: 0.18rem;
      margin-top: 0.2rem;
      span {
        padding-top: 0.1rem;
        display: block;
        color: #26e5a0;
        font-size: 0.16rem;
      }
    }
  }
  .beian {
    position: absolute;
    width: 100%;
    color: rgb(187, 187, 187);
    text-align: center;
    bottom: 0.05rem;
  }
}

a{
  text-decoration:none;
  display: block;
  min-width: 250px;
}


</style>
